<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>地图</title>

</head>
<body>
<div id="map" style="min-width: 400px;height: 780px;"></div>
</body>
<!--<script src="https://img.hcharts.cn/highmaps/highmaps.js"></script>-->
<script src="js/echarts.min.js"></script>
<script src="js/china.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    let dataURL = "weibo.json"
    //1.准备省份数据
    //var data = [{"name":"北京","value":69},{"name":"天津","value":14},{"name":"河北","value":55},{"name":"山西","value":60},{"name":"内蒙古","value":44},{"name":"辽宁","value":89},{"name":"吉林","value":98},{"name":"黑龙江","value":8},{"name":"上海","value":41},{"name":"江苏","value":19},{"name":"浙江","value":35},{"name":"安徽","value":83},{"name":"福建","value":24},{"name":"江西","value":81},{"name":"山东","value":28},{"name":"河南","value":83},{"name":"湖北","value":52},{"name":"湖南","value":47},{"name":"广东","value":91},{"name":"广西","value":92},{"name":"海南","value":84},{"name":"重庆","value":10},{"name":"四川","value":91},{"name":"贵州","value":69},{"name":"云南","value":30},{"name":"西藏","value":12},{"name":"陕西","value":19},{"name":"甘肃","value":31},{"name":"青海","value":10},{"name":"宁夏","value":10},{"name":"新疆","value":34},{"name":"台湾","value":43},{"name":"香港","value":98},{"name":"澳门","value":15},{"name":"南海诸岛","value":89},{"name":"南海诸岛","value":77}];
    //2.创建Echart
    let chart = echarts.init(document.getElementById("map"));
    //let weiboData = []

    chart.showLoading()
    $.getJSON(dataURL,function (data) {
        chart.hideLoading()

        let weiboData = data.map(function (serieData,idx) {
            let x = serieData[0] / 1000;
            let y = serieData[1] / 1000;

            let res = [[x,y]];

            for (let i = 2;i<serieData.length;i+=2){
                let dx = serieData[i] / 1000;
                let dy = serieData[i + 1] / 1000;

                let xx = x + dx;
                let yy = y + dy;
                res.push([xx,yy,1])

                x = xx;
                y = yy;
            }

            return res;
        })

        drawMap(weiboData)

    });

    function drawMap(weiboData) {
        chart.setOption({
            title:{
                text:"I will 点亮 China",
                subtext: '数据来weibo.json',
                left: "center",
                top: 20,
                textStyle:{color:'#f4f4f4'}
            },
            backgroundColor: "#404a59",
            legend:{
                left: 'left',
                data: ['强','中','弱'],
                textStyle: {
                    color: '#ccc'
                }
            },
            geo: {
                name: '强',
                type: 'scatter',
                map: 'china',
                label: {
                    emphasis: {
                        show: false
                    }
                },
                itemStyle: {
                    normal:{
                        areaColor: '#323c48',
                        borderColor: '#111'
                    },
                    emphasis: {
                        areaColor: '#2a333d'
                    }
                }
            },
            series: [
                {
                    name: '弱',
                    type: 'scatter',
                    coordinateSystem: 'geo',
                    symbolSize: 1,
                    large: true,
                    itemStyle:{
                        normal: {
                            shadowBlur:2,
                            shadowColor: 'rgba(37,140,249,0.8)',
                            color: 'rgba(37,140,249,0.8)'
                        }
                    },
                    data: weiboData[0]
                },
                {
                    name: '中',
                    type: 'scatter',
                    coordinateSystem: 'geo',
                    symbolSize: 1,
                    large: true,
                    itemStyle:{
                        normal: {
                            shadowBlur:2,
                            shadowColor: 'rgba(14,241,242,0.8)',
                            color: 'rgba(14,241,242,0.8)'
                        }
                    },
                    data: weiboData[1]
                },
                {
                    name: '强',
                    type: 'scatter',
                    coordinateSystem: 'geo',
                    symbolSize: 1,
                    large: true,
                    itemStyle:{
                        normal: {
                            shadowBlur:2,
                            shadowColor: 'rgba(255,255,255,0.8)',
                            color: 'rgba(255,255,255,0.8)'
                        }
                    },
                    data: weiboData[2]
                }
            ]
        })
    }

</script>

</html>